<template>
  <div class="header">
    <div id="title" class="title" :class="[is_showTop && 'active']">
      <div @click="is_nav = true">
        <img
         v-if="is_showTop"
          src="/src/assets/img/head01.png"
          alt=""
         
        />
        <img
         v-if="!is_showTop"
          src="/src/assets/img/head11.png"
          alt=""
        />
      </div>
      <div>
        <img v-if="!is_showTop" src="/src/assets/img/home_logo.png" alt="" @click="toPage({ url: 'home' }, -1)" />
        <img v-if="is_showTop" src="/src/assets/img/home_logo2.png" alt="" @click="toPage({ url: 'home' }, -1)" />
      </div>
      <div @click="is_search = true">
        <img
         v-if="is_showTop"
          src="/src/assets/img/head02.png"
          alt=""
         
        />
        <img
         v-if="!is_showTop"
          src="/src/assets/img/head22.png"
          alt=""
        />
      </div>
    </div>
    <div class="nav" :class="[is_nav && 'active']">
      <div class="title">
        <div>
          <img
            src=""
            alt=""
           @click="is_nav = false"
          />
        </div>
        <div>
          <img src="/src/assets/img/home_logo.png" alt="" />
        </div>
        <div>
          <img
            src="/src/assets/img/head02.png"
            alt=""
            
           @click="is_nav = false,is_search=true"
          />
        </div>
      </div>
      <ul>
        <!---->
        <li v-for="(item, index) in nav_list" :key="index">
          <div>
            <img
             
              src="https://www.shbotao.net//uploads/allimg/20211127/8f2913af158a3a1e942dfdbfe7ca99c7.png"
              alt=""
            />
          </div>
          <div>
            <h3 @click.stop="toPage(item)">{{ item.title }}</h3>
            <div v-if="item.sonList.length > 0">
              <span v-for="(value, key) in item.sonList" :key="key" @click.stop="toPage(value)">{{ value.title }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="search-wrap" :class="[is_search && 'show']">
      <div class="title">
        <div>
          <img
          src="/src/assets/img/head01.png"
            alt=""
           @click="is_nav = true,is_search=false"
          />
        </div>
        <div>
          <img src="/src/assets/img/home_logo.png" alt="" />
        </div>
        <div>
          <img
            src=""
            alt=""
           @click="is_search = false"
          />
        </div>
      </div>
      <div class="content-box">
        <h2>我们，让空间更美好</h2>
        <h3>BETTER SPACE,BETTER LIFE</h3>
        <div>
          <input type="text" placeholder="请输入关键词进行搜索" value="" />
          <div class="img-box">
            <img
              src=""
              alt=""
             
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {  useRoute,useRouter } from 'vue-router'
import CommonApi from '@/api/common'
defineProps({
  nav_list: {
    type: Array,
    required: true
  },
  ActiveIndex: {
    tyep: Number,
    require: true
  }
})
const is_search = ref(false)
const is_nav = ref(false)
const is_showTop = ref(false)
onMounted(() => {
  CommonApi.getwebconfig().then((e) => {
    console.log(e)
  })
  const route = useRoute()
  console.log(route.name)
  let noPage = ['strategylist','strategydetail','voice'];
  if(!noPage.includes(route.name)){
    is_showTop.value = true
  }
  window.addEventListener('scroll', () => {
    if (window.scrollY == 0 && !noPage.includes(route.name)) {
      is_showTop.value = false
    } else {
      is_showTop.value = true
    }
  })
})

const router = useRouter()
const toPage = (item) => {
  is_nav.value = false
  router.push({ name: item.url }).then(() => {
    window.scrollTo({
      top: 0
    })
  }) // 改为 push
}
</script>
<style scoped>
.search-wrap {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 50%;
    width: 7.5rem;
    height: 100vh;
    background: #101e2e url(/src/assets/img/bg_menu.jpg) no-repeat;
    background-size: 100% 100%;
    transform: translateX(-50%) translateY(-100%);
    transition: transform .3s;
    line-height: 1;
    color: #fff
}

.search-wrap.show {
    transform: translateX(-50%) translateY(0)
}

.search-wrap .title {
    height: 1.1rem;
    display: flex;
    justify-content: space-between;
    transition: background .3s
}

.search-wrap .title div {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.search-wrap .title div:first-child {
    width: 1.5rem;
    justify-content: start;
    padding-left: .3rem
}

.search-wrap .title div:first-child img {
    width: .36rem;
    height: .28rem
}

.search-wrap .title div:nth-child(2) {
    flex: 1
}

.search-wrap .title div:nth-child(2) img {
    width: 2.55rem;
    height: .48rem
}

.search-wrap .title div:nth-child(3) {
    width: 1.5rem;
    justify-content: flex-end;
    padding-right: .3rem
}

.search-wrap .title div:nth-child(3) img {
    width: .29rem;
    height: .29rem
}

.search-wrap .title.active {
    background: #fff;
    border-bottom: .01rem solid #eee
}

.search-wrap .content-box {
    margin-top: 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.search-wrap .content-box input {
    font-size: .24rem;
    font-weight: 400;
    border-radius: 0!important
}

.search-wrap .content-box input::-moz-placeholder {
    color: #888
}

.search-wrap .content-box input:-ms-input-placeholder {
    color: #888
}

.search-wrap .content-box input::placeholder {
    color: #888
}

.search-wrap .content-box h2 {
    font-size: .62rem
}

.search-wrap .content-box h3 {
    margin-top: .2rem;
    font-size: .26rem;
    font-family: Gilroy
}

.search-wrap .content-box>div {
    margin-top: .79rem;
    display: flex;
    align-items: center;
    height: .93rem
}

.search-wrap .content-box>div input {
    width: 5.28rem;
    height: .93rem;
    border: none;
    text-indent: .4rem
}

.search-wrap .content-box>div .img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: .93rem;
    height: .93rem;
    background-color: #db272a
}

.search-wrap .content-box>div .img-box img {
    width: .25rem;
    height: .25rem
}

.search-wrap .content-box ul {
    position: relative;
    margin-top: 1.76rem;
    font-size: .24rem;
    flex-wrap: wrap;
    width: 6rem;
    text-align: center
}

.search-wrap .content-box ul:before {
    content: "热门搜索";
    position: absolute;
    top: -.75rem;
    left: 0;
    width: 100%;
    font-size: .24rem;
    color: #fff;
    opacity: .33
}

.search-wrap .content-box ul li {
    cursor: pointer
}

.search-wrap .content-box ul li:not(:first-child) {
    margin-top: .3rem
}
.header {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 999;
    width: 7.5rem
}

.header .title {
    height: 1.1rem;
    display: flex;
    justify-content: space-between;
    transition: background .3s;
    border-bottom: .01rem solid transparent
}

.header .title div {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.header .title div:first-child {
    width: 1.5rem;
    justify-content: start;
    padding-left: .3rem
}

.header .title div:first-child img {
    width: .36rem;
    height: .36rem
}

.header .title div:nth-child(2) {
    flex: 1
}

.header .title div:nth-child(2) img {
    width: 2.55rem;
    height: .48rem
}

.header .title div:nth-child(3) {
    width: 1.5rem;
    justify-content: flex-end;
    padding-right: .3rem
}

.header .title div:nth-child(3) img {
    width: .36rem;
    height: .36rem
}

.header .title.active {
    background: #fff;
    border-bottom: .01rem solid #eee
}

.header .nav {
    position: fixed;
    top: 0;
    left: 50%;
    height: 100vh;
    transform: translateX(-50%) translateY(-100%);
    width: 7.5rem;
    background: #101e2e url(/src/assets/img/bg_menu.jpg) no-repeat;
    background-size: 100% 100%;
    z-index: 9999;
    transition: transform .3s
}

.header .nav.active {
    transform: translateX(-50%) translateY(0)
}

.header .nav .title div:first-child img {
    width: .28rem;
    height: .28rem
}

.header .nav ul {
    padding: .4rem .3rem 0;
    overflow: auto;
    height: calc(100% - 1.1rem);
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none
}

.header .nav ul::-webkit-scrollbar {
    width: .03rem;
    height: .03rem
}

.header .nav ul::-webkit-scrollbar-track {
    box-shadow: inset 0 0 .01rem transparent;
    border-radius: .1rem;
    background-color: transparent
}

.header .nav ul::-webkit-scrollbar-thumb {
    border-radius: .1rem;
    box-shadow: inset 0 0 .06rem rgba(0,0,0,.3);
    background: #dad6d6
}

.header .nav ul li {
    border-bottom: .01rem solid hsla(0,0%,93.3%,.2);
    padding: .33rem 0;
    display: flex;
    align-items: center
}

.header .nav ul li:last-child {
    border: none
}

.header .nav ul li div:first-child {
    margin-right: .47rem;
    width: 1.15rem;
    height: 1.15rem;
    border: .02rem solid #f6f6f6;
    border-radius: .1rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.header .nav ul li div:first-child img {
    width: .55rem
}

.header .nav ul li div:nth-child(2) h3 {
    font-size: .28rem;
    font-weight: 400;
    color: #fff;
    cursor: pointer
}

.header .nav ul li div:nth-child(2) div {
    font-size: .24rem;
    font-weight: 400;
    color: #fff;
    margin-top: .2rem
}

.header .nav ul li div:nth-child(2) div span {
    cursor: pointer
}

.header .nav ul li div:nth-child(2) div span:not(:first-child) {
    margin-left: .44rem;
    cursor: pointer
}
</style>
